<template>
	<view>
		<!-- 头部 -->
		<uni-nav-bar fixed="true" statusBar="true" backgroundColor="#E0EDF6">
			<template slot="left">
				<navigator open-type="navigateBack">
					<view class="storeNar">
						<uni-icons type="arrowleft" size="30"></uni-icons>
						<text class="storeName">仔仔旗舰店</text>
					</view>
				</navigator>
			</template>
		</uni-nav-bar>
		<view class="padding30 fontsize30">
			<view class="flex storeHeader">
				<view class="storeHomePageMan">跨店满减 </view>
				<view>每300减40</view>
			</view>
			<view class="storeMainImgBox">
				<image src="/static/image/tj/1@2x.png" mode="aspectFill" class="storeMainImg"></image>
			</view>
			<view class="storeNewTitle">
				<view class="triangle-right"></view>
				<view>新品推荐</view>
				<view class="triangle-left"></view>
			</view>
			<view class="storeList">
				<view class="storeItemBox">
					<view>
						<image src="/static/image/tj/1@2x.png" mode="aspectFill" class="storeItemImg"></image>
					</view>
					<view class="storeBtn">立即抢购</view>
				</view>
				<view class="storeItemBox">
					<view>
						<image src="/static/image/tj/1@2x.png" mode="aspectFill" class="storeItemImg"></image>
					</view>
					<view class="storeBtn">立即抢购</view>
				</view>
			</view>
			<view class="storeList">
				<view class="storeItemBox">
					<view>
						<image src="/static/image/tj/1@2x.png" mode="aspectFill" class="storeItemImg"></image>
					</view>
					<view class="storeBtn">立即抢购</view>
				</view>
				<view class="storeItemBox">
					<view>
						<image src="/static/image/tj/1@2x.png" mode="aspectFill" class="storeItemImg"></image>
					</view>
					<view class="storeBtn">立即抢购</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.padding30{
	padding: 30rpx;
}
page{
	background-color: #E0EDF6;
}
.storeName{
	font-size:30rpx;
	display: inline-block;
	font-weight: bold;
	height:50rpx;
	line-height: 50rpx;
	position: absolute;
	top: 50%;
	transform: translateY(-90%);
}
.storeNar{
	width: 200%;
	height:80rpx;
	position: relative;
	width:500rpx;
	margin-top: 50rpx;
}
.storeHomePageMan{
	font-weight: bold;
	margin-right: 30rpx;
}
.storeHeader{
	height: 80rpx;
	color: #FFFFFF;
	background-color: #1676FE;
	line-height: 80rpx;
	border-radius:10rpx;
	box-sizing: border-box;
	padding: 0 30rpx;
	padding-top: 15rpx;
}
.storeMainImg{
	width: 600rpx;
	height: 700rpx;
	vertical-align: middle;
}
.storeMainImgBox{
	width: 650rpx;
	height: 750rpx;
	background-color: #FFFFFF;
	text-align: center;
	line-height: 740rpx;
	margin: 30rpx auto;
}
.storeNewTitle{
	background-color: #1676FE;
	color: #FFFFFF;
	text-align: center;
	line-height: 60rpx;
	width: 500rpx;
	margin: 0 auto;
	position: relative;
}
.triangle-left {
    width: 0;
    height: 0;
    border-top: 30rpx solid transparent;
    border-right:40rpx solid #E0EDF6;
    border-bottom: 30rpx solid transparent;
	position: absolute;
	right: 0;
	top: -8rpx;
}
.triangle-right {
    width: 0;
    height: 0;
    border-top: 30rpx solid transparent;
    border-left:40rpx solid #E0EDF6;
    border-bottom: 30rpx solid transparent;
	position: absolute;
	left: 0;
	top: -8rpx;
}
.storeItemImg{
	width: 280rpx;
	height: 360rpx;
}
.storeItemBox{
	width: 280rpx;
	padding: 20rpx 20rpx 40rpx 20rpx;
	/* height: 430rpx; */
	text-align: center;
	background-color: #fff;
	margin-right: 20rpx;
}
.storeBtn{
	font-size: 25rpx;
	background-color: #1676FE;
	color: #FFFFFF;
	width: 150rpx;
	margin: 0 auto;
	border-radius: 30rpx;
	padding: 5rpx 0;
}
.storeList{
	display: flex;
	margin: 30rpx 0;
	justify-content: space-between;
}
</style>
